/*
 * facecloud后台api页面
 * @Author: ljb
 * @Date: 2018-03-26 10:18:23
 * @Last Modified by: ljb
 * @Last Modified time: 2019-11-15 16:42:14
 */
<style lang="less" rel="stylesheet/less" type="text/less">
        .api-box{
			 font-size: 20px;
			 width: 500px;
			 .api-text{
				 font-size: 16px;
			 }
			 .try-out{
                  margin-left: 110px;
			 }

        }
</style>
<template>
	<div class="api-box">
		<Form
			ref="formData"
			:model="form_data"
			:rules="ruleInline"
		>

			<Form-item
				label="应用名称"
				prop="name"
			>

				<i-input
					v-model="form_data.name"
					name="app-name"
					type="text"

				/>
			</Form-item>
			<Form-item
				label="Bundle ID"
				prop="bundle_id"
			>

				<i-input
					v-model="form_data.bundle_id"
					name="app-id"
					type="text"

				/>
			</Form-item>
			<Form-item

			>
				<div class="api-text">应用平台</div>

				<RadioGroup
					v-model="form_data.platform"

					size="large">
					<Radio
						label="IOS"
						true-value="0"
					/>
					<Radio
						label="Android"
						class="try-out"
						true-value="1"
					/>
				</RadioGroup>
			</Form-item>
			<FormItem
				label="应用描述"
				prop="description"
			>
				<Input
					v-model="form_data.description"
					:autosize="{minRows: 3,maxRows: 5}"
					type="textarea" ></Input>
			</FormItem>
			<Form-item>
				<Button
					size="large"
					type="primary"
					name="create__submit"
					@click="handleSubmit('formData')">绑定</Button>
			</Form-item>
		</Form>
	</div>
</template>

<script type="text/babel">
import qs from 'qs';

export default {
	data() {
		const validateNull = (rule, value, callback) => {
			if (!value) {
				if (rule.field == 'name') {
					return callback(new Error('名称不能为空!'));
				} else if (rule.field == 'description') {
					return callback(new Error('描述不能为空!'));
				}
				return callback(new Error('Bundle Id不能为空!'));
			}
			if ((/\s/.test(value))) {
				if (rule.field == 'name') {
					return callback(new Error('名称不能为存在空格!'));
				} else if (rule.field == 'description') {
					return callback(new Error('描述不能存在空格!'));
				}
				return callback(new Error('Bundle Id不能存在空格!'));
			}
			callback();
		};
		return {

			form_data: {
				name: '',
				description: '',
				bundle_id: '',
				platform: 'IOS',
			},
			ruleInline: {
				name: [
					{
						required: true,
						validator: validateNull,
						trigger: 'blur,change',
					},
				],
				description: [
					{
						required: true,
						validator: validateNull,
						trigger: 'blur,change',
					},
				],
				bundle_id: [
					{
						required: true,
						validator: validateNull,
						trigger: 'blur,change',
					},
				],
			},
		};
	},
	methods: {
		handleSubmit(name) {
			this.$refs[name].validate((valid) => {
				if (valid) {
					this.login_loading = true;

					// 创建APIkey请求
					this.APICreate(name);
				} else {
					this.$Message.error('你输入的信息有误');
				}
			});
		},
		APICreate(param) {
			 const newData = this.form_data;

			if (newData.platform == 'IOS') {
				newData.platform = 0;
			} else {
				newData.platform = 1;
			}
		   newData.token = sessionStorage.getItem('token');

			this.axios.post(`${window.location.origin}/admin/v1/bundle/create`, qs.stringify(newData))
				.then(({ data }) => {
					if (data.code === 200) {
						this.$Message.success('绑定成功');
						this.$refs[param].resetFields();
						this.form_data.platform = 'IOS';
					} else if (data.code === 7003) {
						this.$Message.error({
							content: 'token验证失败,过期或token错误,请重新登录',
							duration: 5,
							closable: true,

						});
						this.$router.push({
							path: '/login',
						});
					} else {
						throw new Error(data.error);
					}
				})
				.catch((err) => {
					this.$Message.error({
						content: err.message || err.statusText,
						duration: 5,
						closable: true,
					});

					this.login_loading = false;
				});
	   },
	},

};
</script>
